<template>
  <div>
    <el-row>
      <el-col :span="10">
        <h2>可选操作</h2>
        <draggable
          class="dragArea list-group"
          :list="tableData"
          :clone="clone"
          :group="{ name: 'operations', pull: 'clone', put: false }"
          :animation="500"
          @start="start"
        >
          <div class="list-group-item" v-for="element in tableData" :key="element.index">
            {{ element.name }}
          </div>
        </draggable>
      </el-col>
      <el-col :span="10">
        <h2>已选操作</h2>
        <draggable class="dragArea list-group" :list="operationData" group="operations" :animation="500">
          <div
            class="list-group-item"
            v-for="(element, index) in operationData"
            :key="element.index"
            @click="setParams(element)"
          >
            {{ element.name }}
            <el-button size="mini" @click.stop="deleteItem(index)" icon="el-icon-delete" circle></el-button>
            <div>↓</div>
          </div>
        </draggable>
        <el-button type="info" size="small" @click="clearOperations">清空</el-button>
        <el-button type="primary" size="small" @click="submit">确定</el-button>
      </el-col>
    </el-row>
    <el-dialog title="参数设置" :visible.sync="dialogVisible">
      <div v-for="e in params_name" :key="e">
        <div>{{e}}</div>
        <el-input v-model="current_element.params[e].value"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmParams">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import * as api from './api'

export default {
  name: 'operation',
  components: {
    draggable
  },
  mounted () {
  },
  data () {
    return {
      tableData: [{
        id: 1,
        name: '裁剪',
        params: { width: { value: 100, type: 'input' }, height: { value: 100, type: 'input' }, interpolation: { value: '线性插值', type: 'select' } }
      }, {
        id: 2,
        name: '通道转换',
        params: { channel: { value: 'GRAY', type: 'select' } }
      }, {
        id: 3,
        name: '滤波',
        params: {}
      }, {
        id: 4,
        name: '阈值化',
        params: {}
      }, {
        id: 5,
        name: '形态学操作',
        params: {}
      }],
      operationData: [],
      controlOnStart: true,
      dialogVisible: false,
      current_element: {},
      params_name: []
    }
  },
  methods: {
    clone ({ name, id, params }) {
      return { name, id, params }
    },
    start ({ originalEvent }) {
      this.controlOnStart = originalEvent.ctrlKey
    },
    deleteItem (key) {
      this.operationData.splice(key, 1)
      console.log(this.operationData)
    },
    clearOperations () {
      this.operationData = []
    },
    submit () {
      api.applyOperations({ operations: this.operationData })
    },
    setParams (element) {
      this.dialogVisible = true
      this.current_element = element
      this.params_name = Object.keys(element.params)
      console.log(Object.keys(element.params))
    },
    confirmParams () {
      this.dialogVisible = false
      console.log(this.operationData)
    }
  }
}
</script>

<style scoped>
.list-group-item{
  width: 8vw;
  height: 6vh;
  background-color: #f2f2f2;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 10px;
  text-align: center;
  justify-content: center;
  vertical-align: middle;
}
.list-group-item:hover{
  background-color: #e6e6e6;
  cursor: pointer;
}
.dragArea{
  width: 100%;
  height: 100%;
  border: 2px solid #ffffff;
  background: #c4c4c4;
  border-radius: 4px;
  min-height: 70vh;
  min-width: 9vw;
  max-height: 75vh;
  overflow: auto;
}
.el-col{
  text-align: center;
}
</style>
